<template>
  <div class="blog">
    <header>
      <div>
        <div class="line"></div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          style="background: #fff; border: none; height: 50px"
          text-color="#000"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(item, index) in topList"
            :key="index"
            :index="item.id"
            >{{ item.name }}</el-menu-item
          >

          <div class="top_right" v-if="$store.state.loggingStatus == false">
            <el-button type="info" @click="dialogVisible = true" class="login"
              >登陆</el-button
            >
            <el-button type="info" class="login" @click="register"
              >注册</el-button
            >
          </div>
          <div
            class="picture"
            @mouseover="user_picType = true"
            @mouseout="user_picType = false"
            v-if="$store.state.loggingStatus == true"
          >
            <div>
              <img src="../../src/assets/images/touxiang.jpg" alt="" />
            </div>
            <ul v-show="user_picType == true">
              <li @click="changedData">修改个人资料</li>
              <li @click="getOut">退出登录</li>
            </ul>
          </div>
          <div class="top_right" v-if="$store.state.loggingStatus == true && $store.state.userInfo.status == 1">
            <el-button type="info" size="mini" @click="goPage">管理</el-button>
          </div>
        </el-menu>
      </div>
    </header>
    <article>
      <router-view />
    </article>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="loginFrom" label-width="60px">
        <el-form-item prop="name" label="用户名">
          <el-input v-model="loginFrom.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            type="password"
            v-model="loginFrom.password"
            autocomplete="off"
          ></el-input
        ></el-form-item>
      </el-form>
      <el-button
        type="success"
        round
        style="width: 80%; margin-left: 13%"
        @click="login"
        >登陆</el-button
      >
    </el-dialog>
    <div class="bottom">
    </div>
  </div>
</template>
<script>
import request from "../api/request";
import Api from "../api/api";
import qs from "qs";
export default {
  data() {
    return {
      activeIndex: "0",
      topList: [
        {
          id: "0",
          name: "博客首页",
          pathName: "homecontent",
        },
        {
          id: "1",
          name: "文章分类",
          pathName: "articleClassify",
        },
        // {
        //   id: "2",
        //   name: "生活分享",
        //   pathName: "",
        // },
        {
          id: "2",
          name: "个人简历",
          pathName: "resume",
        },
        // {
        //   id: "3",
        //   name: "关于我",
        //   pathName: "",
        // },
        {
          id: "4",
          name: "个人相册",
          pathName: "",
        },
        {
          id: "5",
          name: "留言",
          pathName: "",
        },
      ],
      dialogVisible: false,
      loginFrom: {
        username: "",
        password: "",
      },
      setUserInfo: null,
      user_picType: false,
    };
  },
  mounted() {
    this.$router.push({ name: "homecontent" });
    this.getArticleCateData()
    this.$store.commit("setUserInfo", JSON.parse(window.localStorage.setUserInfo));
  },
  methods: {
    // 随便调用一个接口判断token有没有失效
    getArticleCateData() {
      let params = {
        method: "GET",
        url: Api.getArticleCate,
      };
      request(params)
        .then((result) => {
          if (result.status == 0) {
            this.$store.commit("setLoggingStatus",true);
          }
        })
        .catch((err) => {
        });
    },
    //点击头部标签栏切换事件
    handleSelect(item) {
      let name 
      this.topList.forEach(item2 => {
        if(item2.id == item){
          name = item2.pathName
        }
      })
      this.$router.push({ name:name});
    },
    // 点击登录弹出登录
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 登录按钮
    login() {
      if (this.loginFrom.name == "" && this.loginFrom.password == "") {
        return this.$message.error("用户名和密码不能为空!");
      } else if (this.loginFrom.name == "") {
        return this.$message.error("用户名不能为空!");
      } else if (this.loginFrom.password == "") {
        return this.$message.error("密码不能为空!");
      } else if (!/^\w{6,15}$/.test(this.loginFrom.name)) {
        return this.$message.error(
          "用户名格式有误!请输入6～15位数字字母或下划线"
        );
      } else if (!/^\w{6,15}$/.test(this.loginFrom.password)) {
        return this.$message.error(
          "密码格式有误!请输入6～15位数字字母或下划线"
        );
      }
      this.loginUser();
    },
    // 注册
    register() {
      this.$router.push({ name: "login" });
    },
    // 进入管理页面
    goPage() {
      this.$router.push({ name: "page" });
    },
    // 用户登录
    loginUser() {
      let { username, password } = this.loginFrom;
      let params = {
        method: "post",
        url: Api.userLogin,
        data: qs.stringify({ username: username, password: password }),
      };
      request(params)
        .then((result) => {
          if (result.status == 0) {
            this.setUserInfo = result.data;
            this.$store.commit("setUserInfo", result.data);
            this.$store.commit("setLoggingStatus",true);
            localStorage.setItem('token',result.token)
            localStorage.setItem('setUserInfo',JSON.stringify(result.data))
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
            this.dialogVisible = false;
          } else {
            this.$message.error("用户名或密码输入错误");
          }
        })
        .catch((err) => {});
    },
    // 退出登录
    getOut(){
      this.$store.commit("setUserInfo",{});
      this.$store.commit("setLoggingStatus",false);
    },
    // 修改个人资料
    changedData(){
      this.$router.push({name:'changedData'})
    }
  },
};
</script>
<style lang="scss" scoped>
header {
  height: 50px;
  width: 100%;
  background: #fff;
  color: #000;
  .top_right {
    float: right;
    margin-right: 40px;
    height: 50px;
    display: flex;
    align-items: center;
  }
  .picture {
    width: 120px;
    position: absolute;
    right: 100px;
    div {
      height: 50px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 225px;
    }
    ul {
      background-color: #fff;
      width: 100%;
      padding-top: 10px;
      border: 1px solid #e1e1e1;
      li {
        text-align: center;
        width: 100%;
        color: #333;
        padding: 5px 0;
      }
      li:hover {
        background-color: #e1e1e1;
        cursor: pointer;
        color: red;
      }
    }
  }
}
.blog {
  // background-color: #e1e1e1;
   background-image: url('../assets/images/header-bg.jpg'); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

.login {
  border: none;
  background-color: #fff;
  width: 50px;
  height: 25px;
  color: #000;
  padding: 0;
}
.el-menu-item {
  height: 50px;
  line-height: 50px;
}
/* 改变elementui 侧边栏移入颜色 */
.blog >>> .el-menu-item:hover {
  background: #fff !important;
  color: #ffd04b !important;
}
.blog >>> .el-submenu__title:hover {
  background: #fff !important;
  color: #ffd04b !important;
}
.blog >>> .el-menu-item.is-active {
  background: #fff !important;
  color: #ffd04b !important;
}
.blog >>> .el-submenu__title.is-active {
  background: #fff !important;
  color: #ffd04b !important;
}

.bottom{
  width: 100%;
  height: 200px;
  background-color: #333;
}
</style>